<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<head>
    <title>HLS Video Player</title>
</head>

<body style="background-color: black;">
    <video id="video" controls width="100%"></video>

    <div>
        <input type="text" id="myInput" placeholder="请输入m3u8地址">
        <button onclick="OnPlay()">播放</button>
    </div>

    <script src="hls.js"></script>
    <script>
        // var video = document.getElementById('video');
        // var hls = new Hls();

        // // hls.loadSource('https://play.modujx10.com/20230703/r9s4tBoA//2198kb/hls/index.m3u8');
        // hls.loadSource('http://localhost/play/1/index.m3u8');
        // hls.attachMedia(video);
        // hls.on(Hls.Events.MANIFEST_PARSED, function () {
        //     video.play();
        // });

        function OnPlay() {
            var inputValue = document.getElementById('myInput').value;

            var video = document.getElementById('video');
            var hls = new Hls();

            // hls.loadSource('https://play.modujx10.com/20230703/r9s4tBoA//2198kb/hls/index.m3u8');
            hls.loadSource(inputValue);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });

        }
    </script>




</body>

</html>